<template>
  <div
    class="listbox"
    @mousemove="moveflag ? moveLyricScrollBar($event) : false"
    v-show="flag"
  >
    <FloorSongListHead></FloorSongListHead>
    <div class="listbody">
      <FloorSongPlayList></FloorSongPlayList>
      <FloorRightLyric></FloorRightLyric>
    </div>
  </div>
</template>

<script>
import FloorSongListHead from "@/components/floorFuntionZone/FloorSongList/FloorSongListHead.vue";
import FloorSongPlayList from "@/components/floorFuntionZone/FloorSongList/FloorSongPlayList.vue";
import FloorRightLyric from "@/components/floorFuntionZone/FloorSongList/playListLyric/FloorRightLyric.vue";
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";

export default {
  name: "FloorSongList",
  components: { FloorSongListHead, FloorSongPlayList, FloorRightLyric },
  setup() {
    const store = useStore();
    const moveflag = computed(() => store.state.SongLyric.mousemoveFlag);
    const flag = computed(() => store.state.SongList.flag);
    function moveLyricScrollBar(e) {
      store.commit("SongLyric/changeLyricScrollBar", e.clientY);
    }
     
    
    return {
      moveLyricScrollBar,
      moveflag,
      flag,
    };
  },
};
</script>

<style scoped lang="less">
.listbox {
  position: absolute;
  left: 50%;
  bottom: 47px;
  width: 986px;
  height: 301px;
  margin-left: -493px;
}
.listbody {
  position: absolute;
  left: 0;
  top: 41px;
  padding: 0 5px;
  width: 976px;
  height: 260px;
  overflow: hidden;
  background: url(../../../common/images/playlist_bg.png) repeat-y -1014px 0;
}
</style>
